<template>
  <div id="feature">
    <ul id="toolBox">
      <li :style="bg.bgcolor1" @click="$emit('drawPoint')"> 画点</li>
      <li :style="bg.bgcolor2">box2</li>
      <li :style="bg.bgcolor3">box3</li>
      <li :style="bg.bgcolor4">box4</li>
      <li :style="bg.bgcolor5" @click="removeAll">清除</li>
    </ul>
    <form class="form-inline">
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
      </select>
    </form>
  </div>
</template>
<script>

// import map from '@/map';
export default {
  // mixins: [map],
  name: 'toolBox',
  data() {
    return {
      bg: {
        bgcolor1: null,
        bgcolor2: null,
        bgcolor3: null,
        bgcolor4: null,
        bgcolor5: null
      }
    }
  },
  methods: {
    getRandomColor() {
      let r = parseInt(Math.random() * 256);
      let g = parseInt(Math.random() * 256);
      let b = parseInt(Math.random() * 256);
      let a = Math.ceil(Math.random() * 10) / 10;
      return 'background: rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    },
    removeAll() {
      console.log(this)
      this.come();
    }
  },
  mounted() {
    this.bg.bgcolor1 = this.getRandomColor();
    this.bg.bgcolor2 = this.getRandomColor();
    this.bg.bgcolor3 = this.getRandomColor();
    this.bg.bgcolor4 = this.getRandomColor();
    this.bg.bgcolor5 = this.getRandomColor();
  }
}
</script>
<style lang="scss" scoped>
#toolBox {
  display: flex;
  justify-content: space-between;
  width: 500px;
}
</style>
